<template>
  <view @click="dismissPop()" class="mine-container">
    <view
      class="mall-container"
      :style="'padding-top:' + setting.header.allHeight + 'px'"
    >
      <view
        class="mine-header"
        :style="
          'height:' +
          setting.header.height +
          'px;' +
          'padding-top:' +
          setting.header.top +
          'px;padding-bottom:12rpx'
        "
      >
        <view class="inner">
          <image
            src="http://static.kuaimayoupin.com/0119432821369318.png"
            class="mine-return-img"
            @click.stop="toPop"
          ></image>
        </view>
      </view>
      <view class="personal-card">
        <view class="personal-card-left">
          <view class="personal-head-box" v-if="userInfo.avatar">
            <image
              :src="userInfo.avatar"
              mode="aspectFit"
              class="personal-head"
              @click="previewImageFun"
            ></image>
          </view>
          <view class="personal-head-box" v-else>
            <image
              src="http://static.kuaimayoupin.com/5814340611455953.png"
              mode="aspectFit"
              class="personal-head"
              @click="previewImageFun"
            ></image>
          </view>
          <view class="more" @click.stop="showMoreAction">
            <u-icon name="more-dot-fill" size="38" color="#CED1DD"></u-icon>
          </view>
          <view v-if="isShowMore == true" class="more-box">
            <view @click.stop="reportAction" class="more-item">举报</view>
            <view class="line"></view>
            <view @click.stop="blackAction" class="more-item">拉黑</view>
          </view>
        </view>
        <view class="personal-card-right">
          <view class="personal-name">{{ userInfo.nick_name || "匿名" }}</view>
          <view class="personal-info-middle">
            <view>
              <view style="display: flex">
                <text class="personal-tag orange-tag" v-if="userInfo.vip">{{
                  getpersonalVip()
                }}</text>
                <text class="personal-tag blue-tag">{{
                  userInfo.certificated ? "已认证" : "未认证"
                }}</text>
                <text
                  v-if="userInfo.fate_value"
                  class="personal-tag pink-tag"
                  >{{ "缘分值" + userInfo.fate_value }}</text
                >
                <image
                  class="personal-sex"
                  v-if="userInfo.sex == 'F'"
                  src="http://static.kuaimayoupin.com/6469534775244423.png"
                  mode="aspectFit"
                ></image>
                <!-- 男 -->
                <image
                  class="personal-sex"
                  v-else-if="userInfo.sex == 'M'"
                  src="http://static.kuaimayoupin.com/7579544950996162.png"
                  mode="aspectFit"
                ></image>
              </view>
              <view style="margin-top: 20upx; color: #ffffff">
                ID:{{ userInfo.codeID }}
              </view>
              <view class="personal-address"
                >{{ userInfo.work_place ? "现居" + userInfo.work_place : ""
                }}{{ userInfo.job ? "/" + userInfo.job : "" }}</view
              >
            </view>
            <view
              @click.stop="followAction"
              :class="['attention', hasFollow ? 'attentioned' : '']"
            >
              <view v-if="hasFollow === false" class="follow-add">
                <u-icon name="plus" color="#FFFFFF" size="28"></u-icon>
              </view>
              <view>{{ hasFollow ? "已关注" : "关注" }}</view>
            </view>
          </view>

          <!-- <view class="mine-signature">{{
            userInfo.soliloquy ? userInfo.soliloquy : ""
          }}</view> -->
          <view class="tag-box">
            <text class="personal-tag-c orange-text" v-if="userInfo.birthday">{{
              getAges(userInfo.birthday)
            }}</text>
            <text class="personal-tag-c blue-text" v-if="userInfo.birthday">{{
              getXZ(userInfo.birthday)
            }}</text>
            <text
              class="personal-tag-c pink-text"
              v-if="userInfo.user_status"
              >{{ userInfo.user_status }}</text
            >
          </view>
        </view>
      </view>
    </view>
    <view class="mine-card-bot">
      <view class="inner">
        <view class="mine-tab">
          <!-- 个人资料 -->
          <view class="swiper-item">
            <view v-show="characters.length > 0" class="personal-data-tag-box">
              <block v-for="(character, index) in characters" :key="index">
                <text :class="['personal-data-tag', getTag(index)]">{{
                  character
                }}</text>
              </block>
            </view>
            <view class="basic-data">
              <view class="basic-data-title">基本信息</view>
              <view class="basic-data-ul">
                <view class="basic-data-li">
                  <text class="basic-data-label">年龄：</text>
                  <view class="basic-data-content"
                    >{{ userInfo.birthday || "保密" }}
                    {{ getAges(userInfo.birthday) }} {{ getSX() }}
                    {{ getXZ() }}</view
                  >
                </view>
                <view class="basic-data-li">
                  <text class="basic-data-label">婚况：</text>
                  <view class="basic-data-content">{{
                    userInfo.marital_status || "保密"
                  }}</view>
                </view>
                <view class="basic-data-li">
                  <text class="basic-data-label">籍贯：</text>
                  <view class="basic-data-content">{{
                    userInfo.native_place || "保密"
                  }}</view>
                </view>
                <view class="basic-data-li">
                  <text class="basic-data-label">身高：</text>
                  <view class="basic-data-content">{{
                    (userInfo.height || "--") + "cm"
                  }}</view>
                </view>
                <view class="basic-data-li">
                  <text class="basic-data-label">工作：</text>
                  <view class="basic-data-content">{{
                    userInfo.job || "保密"
                  }}</view>
                </view>
                <view class="basic-data-li">
                  <text class="basic-data-label">单位性质：</text>
                  <view class="basic-data-content">{{
                    userInfo.work_type || "保密"
                  }}</view>
                </view>
                <view class="basic-data-li">
                  <text class="basic-data-label">工作地：</text>
                  <view class="basic-data-content">{{
                    userInfo.work_place || "保密"
                  }}</view>
                </view>
                <view class="basic-data-li">
                  <text class="basic-data-label">月薪：</text>
                  <view class="basic-data-content">
                    <template v-if="isNotVip">
                      VIP可见
                      <view @click.stop="tovipAction()" class="open-up"
                        >去开通</view
                      >
                    </template>
                    <template v-else>
                      {{ userInfo.salary || "保密" }}
                    </template>
                  </view>
                </view>
                <view class="basic-data-li">
                  <text class="basic-data-label">学历：</text>
                  <view class="basic-data-content">
                    <template v-if="isNotVip"> VIP可见 </template>
                    <template v-else>
                      {{ userInfo.education || "保密" }}
                    </template>
                  </view>
                </view>
                <view class="basic-data-li">
                  <text class="basic-data-label">住房：</text>
                  <view class="basic-data-content">
                    <template v-if="isNotVip"> VIP可见 </template>
                    <template v-else>
                      {{ userInfo.housing || "" }}
                    </template>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="basic-data-title">交友心声</view>
          <view v-if="userInfo.soliloquy" class="soliloquy">
            {{ userInfo.soliloquy }}
          </view>
          <view class="basic-data-title">择偶标准</view>
          <view v-if="customizeInfo">
            <view class="basic-data-li">
              <text class="basic-data-label">年龄：</text>
              <view class="basic-data-content">
                {{ customizeInfo.age || "" }}
              </view>
            </view>
            <view class="basic-data-li">
              <text class="basic-data-label">婚况：</text>
              <view class="basic-data-content">
                {{ customizeInfo.marital_status.label || "" }}
              </view>
            </view>
            <view class="basic-data-li">
              <text class="basic-data-label">身高：</text>
              <view class="basic-data-content">
                {{ customizeInfo.height || "" }}
              </view>
            </view>
            <view class="basic-data-li">
              <text class="basic-data-label">工作地：</text>
              <view class="basic-data-content">
                {{ customizeInfo.work_place || "" }}
              </view>
            </view>
            <view class="basic-data-li">
              <text class="basic-data-label">月薪：</text>
              <view class="basic-data-content">
                {{ customizeInfo.salary.label || "" }}
              </view>
            </view>
            <view class="basic-data-li">
              <text class="basic-data-label">学历：</text>
              <view class="basic-data-content">
                {{ customizeInfo.education.label || "" }}
              </view>
            </view>
            <view class="basic-data-li">
              <text class="basic-data-label">最在意对方：</text>
              <view class="basic-data-content">
                {{ customizeInfo.best_of_all || "" }}
              </view>
            </view>
          </view>
          <view class="basic-data-title">动态</view>

          <view class="mine-tab-head">
            <!-- 成长足迹 -->
            <view class="swiper-item">
              <template v-if="datas.length == 0">
                <EmptyView v-on:emptyClick="emptyClick" />
              </template>
              <view
                class="life-experience"
                v-for="(item, index) in datas"
                :key="index"
              >
                <view class="life-experience-icon">
                  <image
                    src="/static/images/mine/life-experience-icon.png"
                    mode=""
                    class=""
                  ></image>
                </view>
                <view class="life-experience-line">
                  <view class="life-experience-top">
                    <view class="life-experience-time">{{
                      item.created_time | dateformat
                    }}</view>
                  </view>
                  <view class="life-experience-content" v-if="item.note">
                    <rich-text>{{ item.note }}</rich-text>
                  </view>
                  <template v-if="item.pic_urls">
                    <img-box
                      :imgList="item.pic_urls"
                      :num="item.pic_urls.length"
                    ></img-box>
                  </template>
                  <template v-if="item.video_url && item.pic_urls.length == 0">
                    <view class="video_box" @click="previewMediaFun(item)"
                      ><video
                        :src="item.video_url"
                        :autoplay="false"
                        :loop="false"
                      ></video
                    ></view>
                  </template>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-btns">
      <view @click.stop="goHome" class="btn yes">
        去首页（
        <image
          src="https://static.kuaimayoupin.com/716543628707274.png"
          mode="aspectFit"
        ></image>
        ）
      </view>
      <view @click.stop="heartMessageAction" class="btn yes">
        心动留言（ 1
        <image src="@/static/images/detail/flower_1.png" mode=""></image>
        ）
      </view>
    </view>
    <!-- 模态框 -->
    <u-modal
      v-model="modalSetting.show"
      :content="modalSetting.message"
      :show-cancel-button="true"
      @confirm="deleteDynamic"
    ></u-modal>
    <u-toast ref="uToast" />

    <helloGiftView
      :giftsData="giftsData"
      :isShow="showHello"
      v-on:dismiss="helloDismissAction"
    ></helloGiftView>
    <!-- 认证弹框 -->
    <authDialog
      :isShow="showAuth"
      v-on:close="hideAuthAction"
      :userName="userInfo.nick_name"
      :avatar="userInfo.avatar"
    ></authDialog>

    <loginDialog
      :isShow="isShowLogin"
      v-on:dismiss="loginDismiss"
    ></loginDialog>

  </view>
  <!-- </view> -->
</template>

<script>
import EmptyView from "@/pageA/empty/empty.vue";
import mineTab from "../components/mine-tab/mine-tab.vue";
import imgBox from "../components/imageTypeSet/imagebox.vue";
/// 认证弹框
import authDialog from "@/pages/home/components/auth-dialog.vue";
/// 关注对话框
import helloGiftView from "@/pages/home/components/hello-gift-view.vue";

import { getAges, calculateSX, calculateXZ } from "@/util/tool.js";
import { talkingTipList, customizeLoverInfo, record } from "@/api/user/user.js";
import {
  getInfoById,
  getTalkingTipListById,
  getFollowStatus,
  followRequest,
  followCancleRequest,
  getGiftsList,
  apply,
  userAddBlack,
} from "@/api/home/home.js";
import { EventBus } from "@/util/event-bus.js";

export default {
  components: {
    mineTab,
    imgBox,
    authDialog,
    helloGiftView,
    EmptyView,
  },
  data() {
    return {
      isShowLogin: false,
      tagList: ["personal-orange", "personal-yellow", "personal-green"],
      tabSetting: {
        view: [
          {
            label: "成长足迹",
            data: [],
          },
          {
            label: "个人资料",
          },
        ],
      },
      datas: [],
      userInfo: {},
      user_id: "",
      setting: {
        header: {
          top: 0,
          height: 0,
          allHeight: 0,
        },
      },
      defaultActive: 1,
      showOperation: -1,
      talkingTipList: [],
      removeId: "",
      hasFollow: true,
      modalSetting: {
        show: false,
        message: "确认删除该动态?",
      },
      characters: [],
      isShowMore: false,
      giftsData: {},
      gifts: [],
      showHello: false,
      showAuth: false,
      pagesLength: 0,
      isNotVip: false,
      requestDatas: [],
      customizeInfo: null,
    };
  },
  onShareAppMessage(res) {
    let userId = this.user_id || "";
    let url = "/pageA/personalHome/personalHome?user_id=" + userId;
    return {
      title: "最近超好玩超火爆的脱单神器,没时间解释啦,快点来看看吧",
      path: url,
    };
  },
  onLoad(option) {
    let pages = getCurrentPages();
    this.pagesLength = pages.length;
    this.user_id = option.user_id || "";
    this.getFangWen(option.user_id);
    this.getInfoById();
    this.getTalkingTipListByIdRequest();
    this.getFollowStatus();
    this.getGiftsListRequest();
    this.loadCustomizeInfo();
  },
  onShow() {
    // this.isNotVip = this.isNotVipAction()
  },
  created() {
    const header = uni.getMenuButtonBoundingClientRect();
    this.setting.header.top = header.top;
    this.setting.header.height = header.height;
    this.setting.header.allHeight = header.top + header.height + 6;
  },
  mounted() {
    // this.isNotVip = this.isNotVipAction()
  },
  methods: {
     loginDismiss() {
      this.isShowLogin = false;
    },
    loadCustomizeInfo() {
      customizeLoverInfo({ user_id: this.user_id }).then((res) => {
        if (res.status == 1) {
          this.customizeInfo = res.data;
        }
      });
    },
    getFangWen(id) {
      record({ user_id: id }).then((res) => {});
    },
    getTag(index) {
      // if (this.characters.length == 0) {
      // 	return ""
      // }
      let i = index % 3;
      return this.tagList[i];
    },
    getAges(birthday) {
      let birthdayStr = birthday || "";
      if (birthdayStr == "") {
        return "";
      } else {
        return getAges(birthdayStr);
      }
    },
    getSX() {
      let birthday = this.userInfo.birthday || "";
      if (birthday === "") {
        return "";
      }
      return calculateSX(birthday);
    },
    getpersonalVip() {
      let vip = this.userInfo.vip || "";
      if (vip == "-1" || vip == "") {
        return "非会员";
      } else {
        return vip;
      }
    },
    getXZ() {
      let birthday = this.userInfo.birthday || "";
      if (birthday === "") {
        return "";
      }
      return calculateXZ(birthday);
    },
    toPop() {
      if (this.pagesLength > 1) {
        uni.navigateBack();
      } else {
        uni.reLaunch({
          url: "/pages/home2/home",
        });
      }
    },
    emptyClick() {
      this.getTalkingTipListByIdRequest();
    },
    tovipAction() {
      uni.navigateTo({
        url: "/pageA/vip/vip",
      });
    },
    openOperation(index) {
      this.showOperation == index
        ? (this.showOperation = -1)
        : (this.showOperation = index);
    },
    tabEvent(index) {
      this.defaultActive = index;
    },
    remove(id) {
      this.modalSetting.show = true;
      this.removeId = id;
    },
    getGiftsListRequest() {
      getGiftsList().then((res) => {
        if (res.status == 1) {
          this.gifts = res.data;
          console.log("------gifts--------", this.gifts);
        }
      });
    },
    getFollowStatus() {
      let id = this.user_id || "";
      let data = {
        id: id,
      };
      let that = this;
      getFollowStatus(data).then((res) => {
        console.log("关注结果----------", res);
        var resMeg = "";
        if (res.status == 1) {
          that.hasFollow = res.data;
        }
      });
    },
    getInfoById() {
      let that = this;
      getInfoById({
        user_id: this.user_id,
      }).then((res) => {
        if (res.status == 1) {
          console.log("personal----userInfo======", res.data);
          that.userInfo = res.data;
          let cha = that.userInfo.character || "";
          if (cha != "") {
            var arr = [];
            for (
              var i = 0;
              i < that.userInfo.character.split(";").length;
              i++
            ) {
              if (that.userInfo.character.split(";")[i] != "") {
                arr.push(that.userInfo.character.split(";")[i]);
              }
            }
            that.characters = arr;
            console.log(that.characters);
          }
        }
      });
    },
    getTalkingTipListByIdRequest() {
      let that = this;
      getTalkingTipListById({
        user_id: this.user_id,
      }).then((res) => {
        if (res.status == 1) {
          console.log("getTalkingTipListById======", res.data);
          that.datas = res.data.talkingTips;
        }
      });
    },

    followAction() {
      if (!uni.getStorageSync("token")) {
        this.isShowLogin = true;
        // EventBus.$emit("showLogin");
        return;
      }
      if (this.hasFollow == false) {
        this.toFollowRequest();
      } else {
        this.toFollowCancelRequest();
      }
    },
    toFollowRequest() {
      let id = this.user_id || "";
      let data = {
        id: id,
      };
      let that = this;
      uni.showLoading({
        title: "",
      });
      followRequest(data).then((res) => {
        console.log("关注动作结果----------", res);
        if (res.status == 1) {
          that.hasFollow = true;
          uni.showToast({
            title: res.message || "关注成功",
            icon: "none",
          });
        } else {
          uni.showToast({
            title: res.message || "关注失败",
            icon: "none",
          });
        }
        uni.hideLoading();
      });
    },
    toFollowCancelRequest() {
      let id = this.user_id || "";
      let data = {
        id: id,
      };
      let that = this;
      uni.showLoading({
        title: "",
      });
      followCancleRequest(data).then((res) => {
        console.log("取消关注动作结果----------", res);
        var resMeg = "";
        if (res.status == 1) {
          that.hasFollow = false;
        } else {
          uni.showToast({
            title: res.message || "取消关注失败",
            icon: "none",
          });
        }
        uni.hideLoading();
      });
    },
    showMoreAction() {
      this.isShowMore = true;
    },
    previewImageFun(e) {
      let current =
        this.userInfo.avatar ||
        "http://static.kuaimayoupin.com/5814340611455953.png";
      wx.previewImage({
        current, // 当前显示图片的http链接
        urls: [current], // 需要预览的图片http链接列表
      });
    },
    previewMediaFun(data) {
      // wx.previewMedia({
      // 	current,
      // 	sources:[{url:current,type:'video'}],
      // })
      let url =
        "/pages/home/detial/detial?trendsId=" +
        (data._id || "") +
        "&userId=" +
        (data.userId || "");
      uni.navigateTo({
        url: url,
      });
      // trendsId=6121cf35f79f8f0032903eeb&userId=e6cb9f20-b018-11eb-8ba5-5bda0dc46629
    },
    reportAction() {
      this.isShowMore = false;
      let url = "/pageA/report/report?user_id=" + this.user_id;
      uni.navigateTo({
        url: url,
      });
    },
    /// 心动留言
    heartMessageAction(item) {
      // if (this.isAuth() == false) {
      // 	this.showAuth = true
      // 	return
      // }
      let giftsData = {};
      giftsData.gifts = this.gifts;
      giftsData.userInfo = this.userInfo;
      console.log(giftsData);
      var parios = {
        message: "",
        messageType: 2,
        userID: this.userInfo.user_id,
      };
      apply(parios).then(
        (res) => {},
        (fail) => {
          if (fail.message == "该用户已经是好友") {
            this.showHello = false;
            uni.showToast({
              title: "该用户已经是好友",
              duration: 1000,
              icon: "none",
            });
            var jsonData = {};
            jsonData.imgUrl = this.userInfo.avatar;
            jsonData.user_id = this.userInfo.user_id;
            jsonData.username = this.userInfo.nick_name;
            setTimeout(function () {
              uni.navigateTo({
                // url: "/pageIM/HM-chat/HM-chat?data="+JSON.stringify(jsonData)
                url: "/pageIM/HM-chat/HM-chat?data=" + JSON.stringify(jsonData),
              });
            }, 1000);
            return;
          }
        }
      );
      this.giftsData = giftsData;
      this.showHello = true;
    },
    /// 了解ta
    goHome() {
      uni.reLaunch({
        url: "/pages/home2/home",
      });
    },
    isAuth() {
      return getApp().globalData.userInfo.certificated || false;
    },
    blackAction() {
      this.isShowMore = false;
      let data = {
        user_id: this.user_id || "",
      };
      userAddBlack(data).then((res) => {
        if (res.status == 1) {
          uni.showToast({
            title: "拉黑成功",
          });
          setTimeout(function () {
            EventBus.$emit("recommendListRefresh", true);
            uni.navigateBack();
          }, 1500);
        } else {
          uni.showToast({
            title: "拉黑失败",
            icon: "none",
          });
        }
      });
    },
    helloDismissAction() {
      this.showHello = false;
    },
    hideAuthAction() {
      this.showAuth = false;
    },
    dismissPop() {
      this.isShowMore = false;
    },
    isNotVipAction() {
      let myuserInfo = uni.getStorageSync("userInfo") || {};
      let vip = myuserInfo.vip || "";
      if (vip == "-1" || vip == "") {
        return true;
      }
      return false;
    },
  },
};
</script>

<style lang="scss" scoped>
.mine-container {
  background-color: #fff;
  position: relative;
}
.personal-sex {
  width: 42upx;
  height: 42upx;
}
.mall-container {
  background-image: url("http://static.kuaimayoupin.com/529894327355388.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.mine-header {
  position: fixed;
  top: 0;
  z-index: 100;

  .mine-return-img {
    display: block;
    width: 24px;
    height: 24px;
  }
}

.personal-card {
  padding-bottom: 80rpx;
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;

  .personal-card-left {
    padding-left: 35px;
    padding-right: 15px;
    position: relative;

    .personal-head-box {
      width: 120rpx;
      height: 120rpx;
      border: 1px solid #fff;
      border-radius: 50%;
      overflow: hidden;
    }

    .personal-head-box image {
      display: block;
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }

    .personal-head {
      display: block;
      width: 100%;
      height: 100%;
    }

    .more {
      width: 120rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .more-box {
      position: absolute;
      left: 130rpx;
      top: 145rpx;
      width: 194rpx;
      height: 160rpx;
      z-index: 300;
      background: rgba(255, 255, 255, 1);
      border: 2rpx solid rgba(233, 235, 240, 1);
      display: flex;
      flex-direction: column;

      .line {
        width: 194rpx;
        height: 2rpx;
        background-color: #e9ebf0;
      }

      .more-item {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        font-weight: 400;
        color: rgba(71, 74, 88, 1);
      }
    }
  }

  .personal-card-right {
    width: 100%;
    display: flex;
    flex-direction: column;

    .personal-info-middle {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 10rpx 0;

      .attention {
        width: 140rpx;
        height: 64rpx;
        background: linear-gradient(
          135deg,
          rgba(252, 79, 145, 1) 0%,
          rgba(253, 108, 230, 1) 100%
        );
        border-radius: 200px 0px 0px 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 30rpx;
        font-weight: 500;

        .follow-add {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 64rpx;
          margin-right: 8rpx;
        }
      }

      .attentioned {
        background: #ffffff;
        color: #8389a0;
      }

      .personal-address {
        font-size: 28rpx;
        color: #fff;
        margin-top: 10rpx;
      }
    }

    .personal-name {
      font-size: 34rpx;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 48rpx;
    }

    .personal-tag {
      padding: 4rpx 6rpx;
      border-radius: 2rpx;
      font-size: 22rpx;
      margin-right: 20rpx;
    }

    .personal-tag-c {
      padding: 6rpx 24rpx;
      border-radius: 26rpx;
      font-size: 22rpx;
      margin-right: 20rpx;
      background-color: rgba(255, 255, 255, 0.8);
    }

    .orange-text {
      color: rgba(255, 170, 55, 1);
    }

    .blue-text {
      color: #2d8eff;
    }

    .pink-text {
      color: #ff5998;
    }

    .mine-info {
      display: flex;
      flex-direction: row;
    }
  }
}

.mine-card-bot {
  border-radius: 12px 12px 0 0;
  margin-top: -50rpx;
  background-color: #fff;
  padding-top: 40rpx;
  padding-bottom: 120rpx;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mine-tab {
  width: 100%;

  .soliloquy {
    background-color: #f9f9f9;
    padding: 20rpx 10rpx;
  }
}

.tab-head {
  font-size: 36rpx;
  color: rgba(131, 137, 160, 1);
  line-height: 48rpx;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 30rpx;
  position: relative;

  .tab-head-item {
    margin-right: 40rpx;
  }

  .tab-head-item.active {
    font-weight: 500;
    color: rgba(71, 74, 88, 1);
  }

  .tab-head-item.active:after {
    content: "";
    display: block;
    margin: auto;
    width: 32rpx;
    height: 8rpx;
    background: linear-gradient(
      299deg,
      rgba(248, 212, 87, 1) 0%,
      rgba(254, 21, 194, 1) 100%
    );
    border-radius: 4px;
  }
}

.life-experience {
  display: flex;
  justify-content: flex-start;

  .life-experience-icon,
  .life-experience-icon image {
    display: block;
    width: 32rpx;
    height: 32rpx;
  }

  .life-experience-line {
    margin-left: 20rpx;
    width: 618rpx;
    flexgrow: 1;
    margin-bottom: 30rpx;

    .life-experience-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .life-experience-time {
      font-size: 28rpx;
      color: rgba(131, 137, 160, 1);
    }

    .life-experience-content {
      line-height: 50rpx;
    }
  }

  .life-experience-operation {
    position: relative;

    .dot {
      display: inline-block;
      width: 5px;
      height: 5px;
      background: rgba(206, 209, 221, 1);
      margin-left: 10rpx;
    }

    .life-experience-btn {
      position: absolute;
      right: 0;
      top: 52rpx;
      display: none;
      border: 1px solid rgba(233, 235, 240, 1);
      z-index: 99;

      view {
        width: 196rpx;
        line-height: 80rpx;
        background: rgba(255, 255, 255, 1);
        text-align: center;

        .on {
          background: rgba(243, 246, 248, 1);
        }
      }
    }

    .life-experience-btn.on {
      display: block;
    }
  }
}

.personal-data-tag-box {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

  .personal-data-tag {
    width: 210rpx;
    text-align: center;
    line-height: 64rpx;
    border-radius: 2px;
    margin-right: 30rpx;
    margin-top: 20rpx;
  }

  .personal-data-tag:nth-child(3n) {
    margin-right: 0;
  }
}

.tab-view {
  min-height: 300rpx;
}

.basic-data-title {
  line-height: 38rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: rgba(71, 74, 88, 1);
  margin: 60rpx 0 40rpx;
  border-left: 5px solid #ff5998;
  padding-left: 8rpx;
}
.basic-data-li {
  font-size: 32rpx;
  font-weight: 400;
  color: rgba(71, 74, 88, 1);
  line-height: 60rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.basic-data-li-cen {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 60rpx;

  text {
    font-size: 22rpx;
    font-weight: 400;
    color: rgba(157, 162, 181, 1);
  }
}

.basic-data-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.bottom-btns {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16rpx 66rpx;
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;

  .btn {
    width: 299rpx;
    height: 72rpx;
    border-radius: 4rpx;
    border: 2rpx solid #dfe1ec;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;

    image {
      width: 26.8rpx;
      height: 31.2rpx;
      margin: 0 10rpx;
    }
  }

  .yes {
    background: #fff;
    color: #474a58;
  }

  // .no {
  // 	background: linear-gradient(135deg, #fc4f91 0%, #fd6ce6 100%);
  // 	color: #fff;
  // }
}

.basic-data-content .open-up {
  background: linear-gradient(
    223deg,
    rgba(255, 232, 135, 1) 0%,
    rgba(244, 196, 73, 1) 100%
  );
  border-radius: 12px;
  color: rgba(139, 87, 42, 1);
  font-size: 28rpx;
  font-weight: 500;
  width: 124rpx;
  line-height: 48rpx;
  text-align: center;
  margin-left: 20rpx;
}

.share-btn {
  background: linear-gradient(
    135deg,
    rgba(252, 79, 145, 1) 0%,
    rgba(253, 108, 230, 1) 100%
  );
  border-radius: 2px;
  color: #fff;
  margin-top: 60rpx;
}

.video_box {
  padding: 20rpx 0;
}

.toMine {
  position: fixed;
}
</style>
